import React, { useState, useEffect } from 'react'
import { View, Button, Image, Text } from '@tarojs/components'
import { AtCard, AtButton, AtMessage } from 'taro-ui'
import Taro from '@tarojs/taro'
import './index.scss'
import { getCurrentInstance } from '@tarojs/taro'
import { getTagsListById } from '../../api/index'
import moment from 'moment'
import Data from './components/data/index'
import UpList from './components/upList/index'
import VideoList from './components/video'

interface PersonalTags {
  tagName: string
  tagType: number
}

interface TagsDetailList {
  name: string
  ctime: number
  newView: number
  subscribed: number
  newCount: number
}

export default () => {
  const [tagsDetail, setTagsDetail] = useState<TagsDetailList>()
  const [id, setId] = useState(0)
  const [current, setCurrent] = useState(1)

  useEffect(() => {
    let routerData = getCurrentInstance().router as any
    const { id } = routerData.params
    setId(id)
    ;(async () => {
      const {
        data: { data, errorCode, errorMessage }
      } = await getTagsListById({
        id
      })
      if (!errorCode) {
        setTagsDetail(data)
      } else {
        Taro.atMessage({
          message: errorMessage + ',请充值',
          type: 'error'
        })
      }
    })()
  }, [])

  const chooseCom = (cur) => {
    setCurrent(cur)
  }

  const setComponents = (detail?: TagsDetailList) => {
    console.log(current)

    if (current === 1) {
      return (
        <Data
          view={detail?.newView}
          subscribed={detail?.subscribed}
          count={detail?.newCount}
          id={id}
        ></Data>
      )
    } else if (current === 2) {
      return <UpList name={detail?.name}></UpList>
    } else if (current === 3) {
      return <VideoList name={detail?.name}></VideoList>
    }
  }

  return (
    <View>
      <AtCard
        title={tagsDetail?.name}
        note={
          '标签创建时间' +
          moment(tagsDetail?.ctime ? tagsDetail?.ctime * 1000 : 0).format(
            'YYYY-MM-DD HH:mm:ss'
          )
        }
      ></AtCard>
      <View className="personal-detail-choose-components">
        <AtButton
          className={current === 1 ? 'choosed-btn' : 'choose-btn'}
          type="secondary"
          size="small"
          key="1"
          onClick={() => chooseCom(1)}
        >
          数据
        </AtButton>
        <AtButton
          className={current === 2 ? 'choosed-btn' : 'choose-btn'}
          type="secondary"
          size="small"
          key="2"
          onClick={() => chooseCom(2)}
        >
          up主列表
        </AtButton>
        <AtButton
          className={current === 3 ? 'choosed-btn' : 'choose-btn'}
          type="secondary"
          size="small"
          key="3"
          onClick={() => chooseCom(3)}
        >
          视频列表
        </AtButton>
      </View>
      {setComponents(tagsDetail)}
    </View>
  )
}
